<!-- 寻物启示子组件 -->
<template>
  <div>
    <li
      class="searchNotice_Ul_li"
      @click="goDetail(item.id)"
      v-for="(item, index) in searchNotice"
      :key="index"
    >
      <!-- 物品 -->
      <div class="searchNotice_Ul_li_searchNotice">
        <van-swipe lazy-render>
          <van-swipe-item
            style="height:200px;"
            v-for="(items,indexs)  in   item.imgList "
            :key="indexs"
            @click.stop="bigImg(index,indexs)"
            fit="contain"
          >
            <van-image :src="items" class="swip_img lostFound_Ul_li_lostFound_img">
              <template v-slot:loading>
                <van-loading size="20px" vertical>加载中...</van-loading>
              </template>
            </van-image>
            <!-- <img :src="items" class="swip_img lostFound_Ul_li_lostFound_img" /> -->
          </van-swipe-item>
        </van-swipe>
        <div class="searchNotice_Ul_li_searchNotice_div">物品名称:{{ item.title }}</div>
      </div>

      <!-- 用户 -->
      <div class="userInfo">
        <div class="searchNotice_Ul_li_user">
          <img :src="item.user.avatar" alt />
          <span>姓名:{{ item.user.username }}</span>
        </div>
        <div>
          <div style="width: 100%; padding: 0 3px">
            <p class="overflowSingle" style="font-size: 12px; width: 100%">邮箱:{{ item.user.email }}</p>
            <p class="overflowSingle" style="font-size: 14px">电话:{{ item.user.phone }}</p>
          </div>
          <!-- 丢失时间 -->
          <div class="searchNotice_Ul_li_date">发起时间：{{ formatDateTime(item.createTime) }}</div>
        </div>
      </div>
      <van-divider style="border: 1px solid #f6f7f7; padding: 0 2px" />
    </li>

    <el-pagination
      background
      style="margin-top: 1rem"
      layout="total, prev, pager, next"
      v-if="searchNotice.length > 0"
      @current-change="handleCurrentChange"
      :currentPage="currentPage"
      :page-size="pageSize"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import formatDateTime from '../utils/data'
import { ImagePreview } from 'vant'
export default {
  // 接受父组件传递的数据
  props: {
    searchNotice: {
      type: Array, // 渲染的列表值
    },
    currentPage: {
      type: Number, // 当前现实页码数
    },
    total: {
      type: Number, // 总数
    },
    pageSize: {
      type: Number, // 每页显示数据
    },
    pageCount: {
      type: Number, // 共有几页
    },
  },

  methods: {
    //日期格式化
    formatDateTime(val) {
      return formatDateTime.formatDateTime5(val)
    },

    // 分页处理
    handleCurrentChange(val) {
      this.$emit('getSearchNotic', val)
    },
    // 跳转详情页面
    goDetail(itemId) {
      this.$router.push('/searchdetail/' + itemId)
    },

    // 大图
    bigImg(index, indexs) {
      ImagePreview({
        images: this.searchNotice[index].imgList, // 预览图片的那个数组
        loop: false,
        closeable: true,
        startPosition: indexs, // 指明预览第几张图
      })
    },
  },
}
</script>

<style scoped>
.searchNotice_Ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  align-items: center;
}
.searchNotice_Ul_li {
  width: 100%;
  padding-left: 2%;
  padding-right: 2%;
  padding-bottom: 2%;
  margin-bottom: 2%;
}
.searchNotice_Ul_li_date {
  font-size: 0.4rem;
  color: #a1a1a1;
}

/* 东西的照片 */
.searchNotice_Ul_li_searchNotice {
  width: 100%;
}
.searchNotice_Ul_li_searchNotice_img {
  display: block;

  height: 4rem;
}
.searchNotice_Ul_li_searchNotice_div {
  font-size: 16px;
  margin: 10px 10px 0 0;
  font-weight: 600;
}
/* 用户 */
.searchNotice_Ul_li_user {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;

  align-items: center;
}
.searchNotice_Ul_li_user > img {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
}
.searchNotice_Ul_li_user > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.4rem;
}
.userInfo {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.userInfo p {
  margin: 10px 0;
  font-size: 0.4rem !important;
}
.userInfo span {
  margin-left: 10px;
}
</style>
